<template>
  <div class="login flex-center">
    <div class="login-content">
      <div class="left">
        <img class="left-img" :src="G_imgPath('login.png')" alt=""/>
        <p class="p-one">大圣解忧</p>
        <p>ADDRESS CONCERNS</p>
      </div>
      <div class="right">
        <!-- 切换登录方式 -->
        <div class="change-login-icon flex-between">
          <div></div>
          <div class="login-icon flex-center">
            <div class="margin-20px">{{ is_icon ? '账号登陆' : '扫码登录' }}</div>
            <div class="triangle"></div>
            <i class="iconfont pointer" :class="is_icon ? 'icon-yonghu' : 'icon-erweima'" @click="change_icon"></i>
          </div>
        </div>

        <!-- title -->
        <p class="title-one">后 台 管 理 系 统</p>
        <p>Background system</p>

        <!-- 账号登录 -->
         <el-form v-show="!is_icon" class="login-form" :rules="login_rule" ref="login_form" :model="login_form">
          <el-form-item prop="userPhone">
            <el-input v-model="login_form.userPhone" placeholder="请输入用户名！"></el-input>
          </el-form-item>
          <el-form-item prop="userPwd">
            <el-input v-model="login_form.userPwd" placeholder="请输入密码！" @keyup.enter.native="handle_login('login_form')"></el-input>
            <el-checkbox v-model="is_remember">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="handle_login('login_form')">登录</el-button>
          </el-form-item>
        </el-form>

        <!-- 扫码登录 -->
        <div ref="qrCodeDiv" v-show="is_icon" class="qr-code"></div>
        <p class="qr-text" v-show="is_icon">请用微信扫描二维码登录！</p>
      </div>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  import QRCode from 'qrcodejs2';
  import { mapActions } from 'vuex'

  export default {
    data() {
      return {
        login_form: {
          userPhone: '',
          userPwd: ''
        },
        login_rule: {
           userPhone: [ { required: true, message: '请输入用户名！', trigger: 'blur' } ],
           userPwd:   [ { required: true, message: '请输入密码！', trigger: 'blur' } ],
        },
        is_icon: false,
        is_remember: false
      }
    },
    mounted () {
      // 用户号、密码是否回填
      this.is_remember = localStorage.getItem('is_remember')
      if (this.is_remember === 'true') {
        this.is_remember = true
      }
      if (this.is_remember) {
        this.login_form.userPhone = localStorage.getItem('userPhone')
        this.login_form.userPwd = localStorage.getItem('userPwd')
      } else {
        this.$refs['login_form'].resetFields();
      }
    },
    methods: {
      ...mapActions(['set_user']),

      // 登录
      handle_login(formName) {
        
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 浏览器是否记录账号、密码
            if (this.is_remember) {
              localStorage.setItem('userPhone', this.login_form.userPhone)
              localStorage.setItem('userPwd', this.login_form.userPwd)
              localStorage.setItem('is_remember', this.is_remember)
            } else {
              localStorage.removeItem('userPhone')
              localStorage.removeItem('userPwd')
              localStorage.removeItem('is_remember')
            }

            // 处理登录所需接口参数
            let userPwd       = md5.base64(this.login_form.userPwd)
            userPwd           = userPwd.substr(0, userPwd.length - 2) 
            let userPhone     = this.login_form.userPhone

            this.set_user({userPwd, userPhone}).then(res => {
              if (res.errCode == 200) {
                this.$router.push('/')
              }
            })
          }
        });
      },

      // 切换，账号、密码登录
      change_icon() {
        this.is_icon = !this.is_icon

        if (this.is_icon) {
          this.bindQRCode()
        } else {
          document.querySelector(".qr-code").innerHTML = "";
        }
      },

      // 二维码生成
      bindQRCode() {
        this.$nextTick(() => {
          let dom     = document.querySelector('.qr-code')
          let _width  = dom.clientWidth
          let _height = dom.clientHeight

          new QRCode(this.$refs.qrCodeDiv, {
            text: 'https://www.baidu.com',
            width: _width,
            height: _height,
            colorDark: "#333333",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
          })
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .login {
    background-image: url('../../assets/image/login_back.png');
    background-size: 100% 100%;
    height: 100vh;

    .login-content {
      width: 600px;
      height: 400px;
      background: #E9EDF1;
      border-radius: 20px;
      overflow: hidden;
      display: flex;

      .left,.right {
        flex: 1;
      }

      .left {
        text-align: center;

        .left-img {
          width: 130px;
          margin-top: 80px;
        }

        .p-one {
          font-size: 46px;
          margin: 10px 0;
        }
      }

      .right {
        background-color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;

        // 切换登录方式
        .change-login-icon {
          width: 100%;

          .margin-20px {
            background-color: #999;
            font-size: 12px;
            padding: 3px;
            color: #fff;
          }

          .triangle {
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-left: 14px solid #999;
            border-bottom: 10px solid transparent;
            margin-right: 10px;
          }
        }

        .title-one {
          font-size: 26px;
          font-weight: 600;
          margin: 20px 0 15px 0;
        }

        // 用户名登录
        .login-form {
          margin-top: 30px;

          .login-btn {
            width: 100%;
          }
        }

        // 二维码
        .qr-code {
          width: 200px;
          height: 200px;
          border-radius: 5px;
          margin: 25px 0 0 35px;
          overflow: hidden;
        }

        .qr-text {
          font-size: 16px;
          text-align: center;
          margin-top: 10px;
          color: #ccc;
        }
      }
    }
  }
</style>